เชี่ยวชาญ CSS custom highlight cascade เพื่อการจัดสไตล์การเลือกข้อความที่แม่นยำ เรียนรู้เกี่ยวกับ ::selection, ::highlight และไฮไลท์แบบกำหนดเองพร้อมตัวอย่างและกฎลำดับความสำคัญ
การจัดการลำดับความสำคัญของการเลือกข้อความด้วย CSS Custom Highlight Cascade
ไฮไลท์การเลือกข้อความเริ่มต้นในเว็บเบราว์เซอร์มักจะเป็นพื้นหลังสีน้ำเงินธรรมดากับข้อความสีขาว ถึงแม้จะใช้งานได้ แต่มันอาจไม่สอดคล้องกับแบรนด์หรือข้อกำหนดด้านการเข้าถึงของเว็บไซต์ของคุณ โชคดีที่ CSS มีเครื่องมือที่ทรงพลังในการปรับแต่งไฮไลท์การเลือกข้อความ ทำให้คุณสามารถสร้างประสบการณ์ที่น่าดึงดูดสายตาและเป็นมิตรกับผู้ใช้ได้ โพสต์นี้จะเจาะลึกเกี่ยวกับ CSS custom highlight cascade โดยสำรวจเทคนิคต่างๆ ที่มีอยู่และวิธีจัดการลำดับความสำคัญเพื่อให้ได้ผลลัพธ์ที่ต้องการ เราจะครอบคลุมถึง pseudo-element มาตรฐาน ::selection, pseudo-element ที่ซับซ้อนกว่าอย่าง ::highlight และวิธีการกำหนดไฮไลท์แบบกำหนดเอง โดยเน้นไปที่กฎ cascade และ specificity ที่ควบคุมการทำงานของมัน
ทำความเข้าใจพื้นฐาน: Pseudo-element ::selection
pseudo-element ::selection เป็นพื้นฐานของการจัดสไตล์การเลือกข้อความใน CSS มันช่วยให้คุณสามารถปรับเปลี่ยนลักษณะของข้อความที่ถูกเลือกภายใน element ได้ มันได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่และเป็นวิธีที่ง่ายในการปรับแต่งสีพื้นหลัง สีข้อความ และคุณสมบัติพื้นฐานอื่นๆ ของข้อความที่ถูกเลือก
การใช้งานพื้นฐานของ ::selection
ในการใช้ ::selection คุณเพียงแค่กำหนดเป้าหมายด้วยกฎ CSS และกำหนดสไตล์ที่ต้องการ ตัวอย่างเช่น หากต้องการเปลี่ยนสีพื้นหลังเป็นสีเหลืองและสีข้อความเป็นสีดำเมื่อข้อความถูกเลือก คุณจะใช้ CSS ต่อไปนี้:
::selection {
background-color: yellow;
color: black;
}
กฎนี้จะถูกนำไปใช้กับการเลือกข้อความทั้งหมดบนเว็บไซต์ของคุณ หากคุณต้องการกำหนดเป้าหมายเฉพาะ element คุณสามารถใช้ selector ที่เฉพาะเจาะจงมากขึ้น:
p::selection {
background-color: lightgreen;
color: darkgreen;
}
กฎนี้จะส่งผลต่อการเลือกข้อความภายใน element <p> (ย่อหน้า) เท่านั้น
ข้อจำกัดของ ::selection
แม้ว่า ::selection จะเป็นเครื่องมือที่มีประโยชน์ แต่ก็มีข้อจำกัด โดยหลักแล้วมันอนุญาตให้คุณแก้ไขคุณสมบัติพื้นฐานเช่น background-color และ color เท่านั้น ตัวเลือกการจัดสไตล์ที่ซับซ้อนมากขึ้น เช่น การใช้การไล่ระดับสี (gradients) หรือเงา (shadows) ไม่ได้รับการสนับสนุนโดยตรง นอกจากนี้ ::selection ยังไม่มีกลไกในการสร้างไฮไลท์หลายๆ อันที่ทับซ้อนกันด้วยสไตล์ที่แตกต่างกัน นี่คือจุดที่ pseudo-element ::highlight เข้ามามีบทบาท
ขอแนะนำ ::highlight: ทางเลือกที่ทรงพลังกว่า
pseudo-element ::highlight เป็นส่วนเสริมใหม่ล่าสุดของ CSS ที่ให้ความยืดหยุ่นและการควบคุมไฮไลท์การเลือกข้อความได้มากขึ้น มันช่วยให้คุณสามารถกำหนดไฮไลท์ที่มีชื่อ (named highlights) ทำให้คุณสามารถใช้สไตล์ที่แตกต่างกันกับส่วนต่างๆ ของข้อความที่ถูกเลือกได้ ซึ่งมีประโยชน์อย่างยิ่งสำหรับเลย์เอาต์ที่ซับซ้อนหรือเมื่อคุณต้องการแยกแยะเนื้อหาประเภทต่างๆ ภายในส่วนที่เลือก
การกำหนดไฮไลท์ที่มีชื่อด้วยคุณสมบัติ highlight-name
กุญแจสำคัญในการใช้ ::highlight คือคุณสมบัติ highlight-name คุณสมบัตินี้ช่วยให้คุณสามารถกำหนดชื่อให้กับไฮไลท์ที่เฉพาะเจาะจง ซึ่งคุณสามารถกำหนดเป้าหมายด้วยกฎ CSS ได้ ในการใช้ ::highlight คุณต้องกำหนดไฮไลท์ที่มีชื่อโดยใช้ JavaScript ก่อน เนื่องจาก CSS ไม่สามารถกำหนดชื่อไฮไลท์ใหม่ได้ด้วยตัวเอง มันทำได้เพียง *จัดสไตล์* ไฮไลท์ที่เบราว์เซอร์ได้สร้างขึ้นแล้วเท่านั้น
นี่คือตัวอย่าง:
// JavaScript:
CSS.registerProperty({
name: '--my-custom-highlight',
syntax: '<color>',
inherits: false,
initialValue: 'transparent',
});
โค้ด Javascript นี้จะลงทะเบียน CSS custom property ที่ชื่อว่า --my-custom-highlight ซึ่งรับค่าสีและไม่สืบทอดคุณสมบัติ นี่เป็นขั้นตอนที่จำเป็นก่อนที่จะจัดสไตล์ไฮไลท์ของคุณ ตอนนี้คุณสามารถใช้ CSS เพื่อใช้ไฮไลท์ได้แล้ว:
::highlight(my-custom-highlight) {
background-color: rgba(255, 0, 0, 0.3);
color: white;
}
กฎ CSS นี้จะกำหนดเป้าหมายไฮไลท์ที่ชื่อว่า "my-custom-highlight" และใช้พื้นหลังสีแดงที่มีความโปร่งใส 30% และข้อความสีขาว สังเกตการใช้ rgba เพื่อให้ได้ความโปร่งใส คุณต้องสร้างชื่อ (เช่น `my-custom-highlight`) แล้วอ้างอิงถึงมันใน CSS ผ่าน ::highlight(my-custom-highlight)
การใช้ไฮไลท์ด้วย JavaScript
ตอนนี้ เพื่อที่จะใช้ไฮไลท์ในหน้าเว็บของเราจริงๆ เราจะใช้ Javascript ซึ่งโดยทั่วไปจะทำโดยการครอบส่วนของข้อความที่ต้องการไฮไลท์ด้วยแท็ก <span> และกำหนดสไตล์ highlight-name:
<p>This is some <span style="--highlight: my-custom-highlight;">important</span> text.</p>
ในตัวอย่างนี้ คำว่า "important" จะถูกไฮไลท์ด้วยสไตล์ที่กำหนดไว้สำหรับ "my-custom-highlight" อีกตัวอย่างหนึ่งคือ:
<p>This is <span style="--highlight: warning-highlight;">a warning message</span> that needs attention.</p>
โดยที่ 'warning-highlight' สอดคล้องกับชื่อที่คุณลงทะเบียนไว้กับ CSS.registerProperty และใช้ภายในบล็อก CSS ::highlight(warning-highlight)
ข้อดีของ ::highlight
- ไฮไลท์ได้หลายแบบ: คุณสามารถกำหนดไฮไลท์ที่มีชื่อได้หลายแบบและนำไปใช้กับส่วนต่างๆ ของข้อความ
- ควบคุมได้ละเอียด: คุณสามารถกำหนดเป้าหมายส่วนเฉพาะของข้อความด้วยสไตล์ไฮไลท์ที่แตกต่างกัน
- การไฮไลท์ตามความหมาย: คุณสามารถใช้ไฮไลท์เพื่อสื่อความหมาย เช่น การไฮไลท์ข้อผิดพลาดหรือคำเตือน
ทำความเข้าใจ CSS Highlight Cascade: ลำดับความสำคัญและความเฉพาะเจาะจง
เมื่อมีสไตล์ไฮไลท์หลายแบบถูกนำไปใช้กับข้อความเดียวกัน CSS cascade จะเป็นตัวกำหนดว่าสไตล์ใดจะมีผลบังคับใช้ cascade คือชุดของกฎที่เบราว์เซอร์ใช้เพื่อแก้ไขข้อขัดแย้งระหว่างกฎ CSS ที่แตกต่างกัน การทำความเข้าใจ cascade เป็นสิ่งสำคัญสำหรับการจัดการสไตล์ไฮไลท์แบบกำหนดเองและเพื่อให้แน่ใจว่าสไตล์ที่ต้องการถูกนำไปใช้อย่างถูกต้อง
ลำดับความสำคัญ
CSS cascade จะเป็นไปตามลำดับความสำคัญที่เฉพาะเจาะจง ซึ่งสามารถสรุปได้ดังนี้ (จากลำดับความสำคัญต่ำสุดไปสูงสุด):
- สไตล์ของ User-agent: สไตล์เริ่มต้นของเบราว์เซอร์
- สไตล์ของผู้ใช้: สไตล์ที่ผู้ใช้กำหนด (เช่น ผ่านส่วนขยายของเบราว์เซอร์)
- สไตล์ของผู้เขียน: สไตล์ที่นักพัฒนาเว็บไซต์กำหนด (CSS ของคุณ)
- สไตล์ของผู้เขียนที่มี !important: สไตล์ที่นักพัฒนาเว็บไซต์กำหนดด้วยคีย์เวิร์ด
!important - สไตล์ของผู้ใช้ที่มี !important: สไตล์ที่ผู้ใช้กำหนดด้วยคีย์เวิร์ด
!important
ภายในแต่ละระดับเหล่านี้ ความเฉพาะเจาะจง (specificity) มีบทบาทสำคัญ ความเฉพาะเจาะจงหมายถึงน้ำหนักหรือความสำคัญของ CSS selector โดย selector ที่เฉพาะเจาะจงกว่าจะแทนที่ selector ที่เฉพาะเจาะจงน้อยกว่า
กฎความเฉพาะเจาะจง (Specificity)
ความเฉพาะเจาะจงคำนวณจากกฎต่อไปนี้:
- Inline styles: สไตล์ที่กำหนดโดยตรงใน element ของ HTML โดยใช้ attribute
styleมีความเฉพาะเจาะจงสูงสุด - IDs: Selector ที่กำหนดเป้าหมาย element ด้วย ID (เช่น
#my-element) มีความเฉพาะเจาะจงสูง - Classes, pseudo-classes, and attributes: Selector ที่กำหนดเป้าหมาย element ด้วย class (เช่น
.my-class), pseudo-classes (เช่น:hover), หรือ attributes (เช่น[type="text"]) มีความเฉพาะเจาะจงปานกลาง - Elements and pseudo-elements: Selector ที่กำหนดเป้าหมาย element ด้วยชื่อแท็ก (เช่น
p) หรือ pseudo-elements (เช่น::selection,::highlight) มีความเฉพาะเจาะจงต่ำ - Universal selector: Universal selector (
*) มีความเฉพาะเจาะจงต่ำที่สุด
เมื่อมี selector หลายตัวถูกนำไปใช้กับ element เดียวกัน เบราว์เซอร์จะคำนวณความเฉพาะเจาะจงของแต่ละ selector และใช้สไตล์จาก selector ที่มีความเฉพาะเจาะจงสูงสุด หาก selector สองตัวมีความเฉพาะเจาะจงเท่ากัน สไตล์จาก selector ที่ปรากฏในลำดับหลังสุดในไฟล์ CSS จะถูกนำมาใช้
การนำความเฉพาะเจาะจงไปใช้กับสไตล์ไฮไลท์
เมื่อทำงานกับสไตล์ไฮไลท์แบบกำหนดเอง ความเฉพาะเจาะจงมีความสำคัญเป็นพิเศษเพราะคุณอาจใช้ทั้ง ::selection และ ::highlight ควบคู่ไปกับ inline styles นี่คือวิธีที่การพิจารณาความเฉพาะเจาะจงอาจมีผล:
::selectionvs.::highlight: โดยทั่วไปแล้ว::highlightถือว่า *มีความเฉพาะเจาะจงมากกว่า*::selectionซึ่งหมายความว่าหากทั้งกฎ::selectionและ::highlightถูกนำไปใช้กับข้อความเดียวกัน โดยปกติแล้วกฎของ::highlightจะมีผลบังคับใช้ก่อน- Inline Styles: เช่นเคย inline styles (การใช้ attribute
styleโดยตรงบน element ของ HTML) จะแทนที่ทั้งสไตล์ของ::selectionและ::highlightเว้นแต่จะมีการใช้!important - Selector Specificity: ความเฉพาะเจาะจงของ selector ที่ใช้กับ
::highlightสามารถมีอิทธิพลต่อผลลัพธ์ได้อีก ตัวอย่างเช่นp::highlight(my-highlight)มีความเฉพาะเจาะจงมากกว่าแค่::highlight(my-highlight)และจะมีผลบังคับใช้ก่อนหากทั้งสองถูกนำไปใช้
ตัวอย่างการทำงานของความเฉพาะเจาะจง
ลองดูตัวอย่างเพื่อความเข้าใจที่มากขึ้น:
/* CSS */
::selection {
background-color: blue;
color: white;
}
::highlight(my-highlight) {
background-color: red;
color: yellow;
}
<p>This is some <span style="--highlight: my-highlight;">important</span> text.</p>
ในกรณีนี้ เมื่อผู้ใช้เลือกข้อความ ส่วนที่ทำเครื่องหมายเป็น "my-highlight" จะมีพื้นหลังสีแดงและข้อความสีเหลือง เพราะกฎ ::highlight(my-highlight) มีความเฉพาะเจาะจงมากกว่าและจะแทนที่กฎ ::selection ทั่วไปสำหรับ span นั้นๆ
พิจารณาอีกตัวอย่างหนึ่ง:
/* CSS */
::selection {
background-color: blue;
color: white;
}
p::selection {
background-color: green;
color: black;
}
<p>This is some text.</p>
ที่นี่ หากผู้ใช้เลือกข้อความภายในแท็ก <p> ข้อความนั้นจะมีพื้นหลังสีเขียวและข้อความสีดำ selector p::selection มีความเฉพาะเจาะจงมากกว่า selector ::selection ทั่วไป
กลยุทธ์ในการจัดการ Highlight Cascade
เพื่อจัดการ highlight cascade อย่างมีประสิทธิภาพและเพื่อให้แน่ใจว่าสไตล์ไฮไลท์แบบกำหนดเองของคุณถูกนำไปใช้ตามที่ตั้งใจไว้ ให้พิจารณากลยุทธ์ต่อไปนี้:
1. ใช้ Selector ที่เฉพาะเจาะจง
ใช้ selector ที่เฉพาะเจาะจงเพื่อกำหนดเป้าหมาย element ที่คุณต้องการจัดสไตล์ ตัวอย่างเช่น แทนที่จะใช้กฎ ::selection ทั่วโลก ให้กำหนดเป้าหมาย element หรือส่วนเฉพาะของเว็บไซต์ของคุณโดยใช้ selector ที่เฉพาะเจาะจงมากขึ้นเช่น .my-section::selection หรือ #my-element::selection
2. ใช้ประโยชน์จากคุณสมบัติ highlight-name
เมื่อใดก็ตามที่เป็นไปได้ ให้ใช้คุณสมบัติ highlight-name กับ ::highlight เพื่อกำหนดไฮไลท์ที่มีชื่อ ซึ่งจะช่วยให้คุณสามารถกำหนดเป้าหมายส่วนเฉพาะของข้อความและใช้สไตล์ที่แตกต่างกันตามความหมายทาง semantic หรือบริบทของมัน
3. หลีกเลี่ยงการใช้ !important (โดยทั่วไป)
แม้ว่าคีย์เวิร์ด !important อาจดูน่าดึงดูดใจ แต่ควรหลีกเลี่ยงเมื่อใดก็ตามที่เป็นไปได้ การใช้ !important อาจทำให้ CSS ของคุณดูแลรักษายากขึ้นและอาจนำไปสู่ความขัดแย้งที่ไม่คาดคิด แทนที่จะทำเช่นนั้น ให้มุ่งเน้นไปที่การใช้ความเฉพาะเจาะจงเพื่อควบคุม cascade
4. จัดระเบียบ CSS ของคุณ
จัดระเบียบ CSS ของคุณอย่างมีเหตุผลและสม่ำเสมอ ใช้ความคิดเห็น (comments) เพื่อเอกสารโค้ดของคุณและจัดกลุ่มสไตล์ที่เกี่ยวข้องกันไว้ด้วยกัน ซึ่งจะทำให้ง่ายต่อการทำความเข้าใจและบำรุงรักษา CSS ของคุณ
5. ทดสอบอย่างละเอียด
ทดสอบสไตล์ไฮไลท์แบบกำหนดเองของคุณอย่างละเอียดในเบราว์เซอร์และอุปกรณ์ต่างๆ เบราว์เซอร์ที่แตกต่างกันอาจมีการนำ CSS cascade ไปใช้ที่แตกต่างกันเล็กน้อย ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องแน่ใจว่าสไตล์ของคุณถูกนำไปใช้อย่างสม่ำเสมอบนทุกแพลตฟอร์ม
6. คำนึงถึงการเข้าถึงได้ (Accessibility)
คำนึงถึงการเข้าถึงได้เสมอเมื่อออกแบบสไตล์ไฮไลท์แบบกำหนดเอง ตรวจสอบให้แน่ใจว่าสีที่คุณเลือกให้ความคมชัดเพียงพอระหว่างข้อความและพื้นหลัง นอกจากนี้ หลีกเลี่ยงการใช้สไตล์ที่อาจทำให้ผู้ใช้ที่มีความบกพร่องทางสติปัญญาสับสนหรือเสียสมาธิ
ข้อควรพิจารณาด้านการเข้าถึงได้ (Accessibility)
การปรับแต่งไฮไลท์การเลือกข้อความสามารถปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก แต่สิ่งสำคัญคือต้องให้ความสำคัญกับการเข้าถึงได้ ไฮไลท์ที่ออกแบบมาไม่ดีอาจทำให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นหรือความบกพร่องทางสติปัญญาอ่านและเข้าใจเนื้อหาได้ยาก
ความคมชัดของสี (Color Contrast)
ตรวจสอบให้แน่ใจว่าความคมชัดของสีระหว่างข้อความและพื้นหลังเพียงพอ แนวทางปฏิบัติเพื่อการเข้าถึงเนื้อหาเว็บ (WCAG) แนะนำอัตราส่วนความคมชัดอย่างน้อย 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความขนาดใหญ่ ใช้เครื่องมือออนไลน์เพื่อตรวจสอบอัตราส่วนความคมชัดของสีไฮไลท์ของคุณ
หลีกเลี่ยงการกะพริบ
หลีกเลี่ยงการใช้เอฟเฟกต์กะพริบในสไตล์ไฮไลท์ของคุณ เอฟเฟกต์เหล่านี้อาจทำให้เสียสมาธิและอาจกระตุ้นให้เกิดอาการชักในผู้ใช้ที่เป็นโรคลมชักที่ไวต่อแสง
ให้สัญญาณภาพที่ชัดเจน
ตรวจสอบให้แน่ใจว่าสไตล์ไฮไลท์ให้สัญญาณภาพที่ชัดเจนเพื่อบ่งชี้ว่าข้อความถูกเลือก หลีกเลี่ยงการใช้สไตล์ที่อาจกำกวมหรือสับสน ตัวอย่างเช่น หลีกเลี่ยงการใช้สีพื้นหลังที่คล้ายกับสีพื้นหลังเริ่มต้นมากเกินไป
ทดสอบกับเทคโนโลยีอำนวยความสะดวก
ทดสอบสไตล์ไฮไลท์แบบกำหนดเองของคุณกับเทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ (screen readers) ตรวจสอบให้แน่ใจว่าข้อความที่ถูกเลือกได้รับการประกาศอย่างถูกต้องโดยโปรแกรมอ่านหน้าจอ และสไตล์ไฮไลท์ไม่รบกวนความสามารถของผู้ใช้ในการนำทางและทำความเข้าใจเนื้อหา
ข้อควรพิจารณาด้านความเป็นสากล (Internationalization) และการปรับให้เข้ากับท้องถิ่น (Localization)
เมื่อพัฒนาเว็บไซต์สำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณาความเป็นสากล (i18n) และการปรับให้เข้ากับท้องถิ่น (l10n) ซึ่งรวมถึงการปรับเนื้อหาและการออกแบบของเว็บไซต์ของคุณให้เข้ากับภาษา วัฒนธรรม และภูมิภาคต่างๆ
ทิศทางของข้อความ
ระวังทิศทางของข้อความที่แตกต่างกัน บางภาษา เช่น ภาษาอาหรับและฮีบรู เขียนจากขวาไปซ้าย (RTL) ตรวจสอบให้แน่ใจว่าสไตล์ไฮไลท์แบบกำหนดเองของคุณทำงานได้อย่างถูกต้องทั้งกับทิศทางข้อความจากซ้ายไปขวา (LTR) และ RTL คุณสมบัติทางตรรกะของ CSS (เช่น margin-inline-start, border-inline-end) สามารถช่วยได้ที่นี่
ความแตกต่างทางวัฒนธรรม
คำนึงถึงความแตกต่างทางวัฒนธรรมเมื่อเลือกสีไฮไลท์ สีสามารถมีความหมายที่แตกต่างกันในวัฒนธรรมที่แตกต่างกัน ตัวอย่างเช่น สีแดงอาจเป็นสัญลักษณ์ของความโชคดีในวัฒนธรรมหนึ่งและเป็นอันตรายในอีกวัฒนธรรมหนึ่ง ศึกษาความสำคัญทางวัฒนธรรมของสีในตลาดเป้าหมายสำหรับเว็บไซต์ของคุณ
การรองรับฟอนต์
ตรวจสอบให้แน่ใจว่าฟอนต์ที่คุณเลือกสนับสนุนอักขระและสัญลักษณ์ที่ใช้ในภาษาต่างๆ ใช้ฟอนต์ Unicode ที่สนับสนุนอักขระที่หลากหลาย นอกจากนี้ ให้พิจารณาใช้กลยุทธ์การสำรองฟอนต์ (font fallback) เพื่อให้แน่ใจว่าข้อความของเว็บไซต์ของคุณแสดงผลอย่างถูกต้องแม้ว่าอุปกรณ์ของผู้ใช้จะไม่ได้ติดตั้งฟอนต์ที่จำเป็นก็ตาม
ตัวอย่างการใช้งานจริงและกรณีศึกษา
มาดูตัวอย่างการใช้งานจริงและกรณีศึกษาสำหรับ CSS custom highlight cascade กัน:
1. การไฮไลท์โค้ดตามความหมาย (Semantic Highlighting)
คุณสามารถใช้ไฮไลท์แบบกำหนดเองเพื่อไฮไลท์องค์ประกอบของโค้ดประเภทต่างๆ เช่น คำสำคัญ (keywords), ตัวแปร (variables) และความคิดเห็น (comments) ซึ่งจะช่วยให้ผู้ใช้อ่านและเข้าใจส่วนของโค้ดได้ง่ายขึ้น
/* CSS */
::highlight(keyword) {
color: #0077cc;
}
::highlight(variable) {
color: #cc0077;
}
::highlight(comment) {
color: #666666;
font-style: italic;
}
<pre><code>
<span style="--highlight: keyword;">function</span> <span style="--highlight: variable;">greet</span>(<span style="--highlight: variable;">name</span>) {
<span style="--highlight: comment;">// This is a comment</span>
console.log("Hello, " + <span style="--highlight: variable;">name</span> + "!");
}
</code></pre>
2. การไฮไลท์คำค้นหา
คุณสามารถใช้ไฮไลท์แบบกำหนดเองเพื่อไฮไลท์คำค้นหาภายในผลการค้นหา ซึ่งจะช่วยให้ผู้ใช้ระบุส่วนของข้อความที่เกี่ยวข้องกับคำค้นหาของตนได้อย่างรวดเร็ว
/* CSS */
::highlight(search-term) {
background-color: yellow;
color: black;
}
<p>This is a <span style="--highlight: search-term;">search</span> result that contains the <span style="--highlight: search-term;">search</span> term.</p>
3. การบ่งชี้ช่องที่จำเป็นต้องกรอกในฟอร์ม
คุณสามารถใช้ไฮไลท์แบบกำหนดเองเพื่อบ่งชี้ช่องที่จำเป็นต้องกรอกในฟอร์ม ซึ่งจะช่วยให้ผู้ใช้ระบุช่องที่ต้องกรอกก่อนส่งฟอร์มได้อย่างรวดเร็ว
/* CSS */
::highlight(required) {
background-color: #ffeeee;
border: 1px solid red;
}
<label for="name">Name:</label>
<input type="text" id="name" <span style="--highlight: required;">required</span><br>
สรุป
CSS custom highlight cascade มีเครื่องมือที่ทรงพลังสำหรับการปรับแต่งไฮไลท์การเลือกข้อความและสร้างประสบการณ์ที่น่าดึงดูดสายตาและเป็นมิตรกับผู้ใช้ โดยการทำความเข้าใจ CSS cascade, กฎความเฉพาะเจาะจง และความสามารถของ ::selection และ ::highlight คุณสามารถจัดการสไตล์ไฮไลท์ได้อย่างมีประสิทธิภาพและมั่นใจได้ว่าจะถูกนำไปใช้ตามที่ตั้งใจไว้ อย่าลืมคำนึงถึงการเข้าถึงได้และความเป็นสากลเมื่อออกแบบสไตล์ไฮไลท์แบบกำหนดเองเพื่อสร้างเว็บไซต์ที่ครอบคลุมและเข้าถึงได้สำหรับผู้ชมทั่วโลก โดยการวางแผนการใช้ ::selection และ ::highlight อย่างรอบคอบควบคู่ไปกับ HTML เชิงความหมายและ CSS Custom Properties คุณจะสามารถสร้างเอฟเฟกต์การไฮไลท์ที่ต้องการได้อย่างแม่นยำ ซึ่งจะช่วยเพิ่มทั้งการใช้งานและความสวยงามของหน้าเว็บของคุณ ความยืดหยุ่นที่นำเสนอโดยคุณสมบัติ CSS เหล่านี้ช่วยให้คุณสร้างประสบการณ์ที่ปรับแต่งได้และใช้งานง่ายสำหรับผู้ใช้ ทำให้เนื้อหาของคุณน่าสนใจและเข้าถึงได้มากขึ้น